<div class="{{CSS_PREFIX}}timegrid-left" style="width: {{styles.leftWidth}}; font-size: {{styles.leftFontSize}};">
    {{#each timezones ~}}
        <div class="{{CSS_PREFIX}}timegrid-timezone" data-timezone-index="{{@index}}" style="{{#if hidden}}display:none;{{/if}}position: absolute; top: 0; width: {{width}}%; left: {{left}}%; border-right: {{@root.styles.leftBorderRight}}; background-color: {{backgroundColor}};" >
        {{#if isPrimary}}
            {{#each timeSlots ~}}
                <div class="{{CSS_PREFIX}}timegrid-hour" style="height: {{@root.styles.oneHourHeight}}; color: {{color}}; font-weight: {{fontWeight}};">
                    <span style="{{#if hidden}}display:none{{/if}}">{{{timegridDisplayPrimayTime-tmpl this}}}</span>
                </div>
            {{/each ~}}
            {{#if @root.showHourMarker}}
                <div class="{{CSS_PREFIX}}timegrid-hourmarker" style="top:{{@root.hourmarkerTop}}%; margin-top: calc(6px - {{@root.styles.halfHourHeight}}); height: {{@root.styles.halfHourHeight}};">
                    <div class="{{CSS_PREFIX}}timegrid-hourmarker-time" style="color: {{@root.styles.currentTimeColor}}; font-size: {{@root.styles.currentTimeFontSize}}; font-weight: {{@root.styles.currentTimeFontWeight}}">{{{hourmarkerText}}}</div>
                </div>
            {{/if}}
        {{else}}
            {{#each timeSlots ~}}
                <div class="{{CSS_PREFIX}}timegrid-hour" style="height: {{@root.styles.oneHourHeight}}; color: {{color}}; font-weight: {{fontWeight}};">
                    <span style="{{#if hidden}}display:none{{/if}}">{{{timegridDisplayTime-tmpl this}}}</span>
                </div>
            {{/each ~}}
            {{#if @root.showHourMarker}}
                <div class="{{CSS_PREFIX}}timegrid-hourmarker" style="top:{{@root.hourmarkerTop}}%; margin-top: calc(6px - {{@root.styles.halfHourHeight}}); height: {{@root.styles.halfHourHeight}};">
                    <div class="{{CSS_PREFIX}}timegrid-hourmarker-time" style="color: {{@root.styles.currentTimeColor}}; font-size: {{@root.styles.currentTimeFontSize}};">{{{hourmarkerText}}}</div>
                </div>
            {{/if}}
        {{/if}}
        </div>
    {{/each ~}}
</div>
<div class="{{CSS_PREFIX}}timegrid-right" style="margin-left: {{@root.styles.leftWidth}};">
    <div class="{{CSS_PREFIX}}timegrid-h-grid">
        {{#each hoursLabels ~}}
        <div class="{{CSS_PREFIX}}timegrid-gridline" style="height: {{@root.styles.oneHourHeight}};
            {{#unless @last}}
            border-bottom: {{@root.styles.borderBottom}};
            {{/unless}}
        ">
            <div class="{{CSS_PREFIX}}timegrid-gridline-half" style="height: {{@root.styles.halfHourHeight}}; border-bottom: {{@root.styles.halfHourBorderBottom}};"></div>
        </div>
        {{/each ~}}
    </div>
    <div class="{{CSS_PREFIX}}timegrid-schedules">
        <div class="{{CSS_PREFIX}}timegrid-schedules-container"></div>
    </div>

    {{#if showHourMarker}}
    <div class="{{CSS_PREFIX}}timegrid-hourmarker" style="top:{{hourmarkerTop}}%">
        <div class="{{CSS_PREFIX}}timegrid-hourmarker-line-left" style="width:{{todaymarkerLeft}}%; border-top: {{styles.currentTimeLeftBorderTop}};"></div>
        <div class="{{CSS_PREFIX}}timegrid-todaymarker" style="left:{{todaymarkerLeft}}%; background-color: {{styles.currentTimeBulletBackgroundColor}}; ">today</div>
        <div class="{{CSS_PREFIX}}timegrid-hourmarker-line-today" style="left:{{todaymarkerLeft}}%; width: {{todaymarkerWidth}}%; border-top: {{styles.currentTimeTodayBorderTop}};"></div>
        <div class="{{CSS_PREFIX}}timegrid-hourmarker-line-right" style="left:{{todaymarkerRight}}%; border-top: {{styles.currentTimeRightBorderTop}};"></div>
    </div>
    {{/if}}
</div>
